<template>
    <view class="uni-shadow u-p-b-10 box">
        <view class="u-m-b-20 u-flex u-row-between title">
            <view class="u-flex">
                <view v-if="baseData.line" class="uni-line u-m-r-20"></view>
                <text class="u-font-32 font-bold">{{baseData.title}}</text>
            </view>
            <u-button v-if="baseData.rightText" class="uni-look-btn" 
                type="warning" :plain="true" shape="circle" text=""
                @tap="rightBtnClick">
                <text class="u-font-24">{{baseData.rightText}}</text>
            </u-button>
        </view>
        <view v-for="(item,index) in baseData.list" :key="index" class="u-flex u-row-between u-p-t-20 u-p-b-20 u-font-28 item">
            <text class="uni-gery-color">{{item.title}}</text>
            <view class="u-flex" style="max-width:75%">
                <uni-phone v-if="item.type=='phone'" :phone="item.value" :size="14" />
                <text v-if="item.type!='phone'" class="u-font-28 u-text-right">
                    {{item.value}}{{(item.value||item.value==0)&&item.value!='暂无数据源'?item.unit:''}}
                </text>
                <u--text v-if="item.type=='look'" class="u-m-l-30" text="查看" type="warning" size="14" 
                    @tap="lookClick(item.field)">
                </u--text>
            </view>
        </view>
    </view>
</template>


<script>
export default {
    name: 'baseInfo',
    props:{
        baseData:{
            type: Object,
            default(){
                return {
                    line: true,
                    title: '基础信息',
                    rightText: '',
                    list:[
                        { title:'单位名称', value:'新疆塔建三五九建工有限责任公司' },
                        { title:'统一信用代码', value:'91659002MA77X84A58' },
                        { title:'证件类型', value:'暂无数据' },
                        { title:'单位地址', value:'新疆阿拉尔市滨海大道东1395好' },
                        { title:'手机号码', value:'15334527675', type:'phone' },
                        { title:'单位类型', value:'施工单位' },
                    ]
                }
            }
        }
    },

    data(){
        return{}
    },

    methods: {
        // 右上角查看
        rightBtnClick(){
            this.$emit('rightTopClick')
        },

        // 右侧查看
        lookClick(field){
            this.$emit('lookClick',{field:field})
        }
    },
}
</script>


<style scoped lang="scss">
    .box{
        background: $uni-text-color-inverse;
        .item{
            border-bottom: 1rpx solid #eee;
            &:last-child{
                border: none;
            }
        }
    }
</style>